<template>
<el-dialog
    custom-class="rs-dialog"
    :title="title"
    :visible.sync="dlgVisible"
    :close-on-click-modal="false"
    :before-close="()=>handleClose('cancel')"
    width="500px">
    <el-form :key="key" :model="form" :rules="rules" :label-width="formLabelWidth" ref="form">
        <el-form-item label="角色编号" prop="jsnm" >
            <el-input v-model="form.jsnm" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="jsmc" >
            <el-input v-model="form.jsmc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色类型" prop="jslx">
            <RsDict v-model="form.jslx" dict="roleType" style="width:100%;"></RsDict>
        </el-form-item>
        <el-form-item label="角色级别" prop="jsjb">
            <RsDict v-model="form.jsjb" dict="roleLevel" style="width:100%;"></RsDict>
        </el-form-item>
        <el-form-item label="排序号" prop="jsxh">
            <el-input v-model.number="form.jsxh" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose('cancel')">取&emsp;消</el-button>
        <el-button size="small" type="primary" @click="handleClose('ok')">确&emsp;定</el-button>
    </span>
</el-dialog>
</template>
<script>
import deepmerge from 'deepmerge';
import dlg from '../../mixin/dlg';
import role from '@/api/role'
export default {
    name:"RoleForm",
    mixins:[dlg],
    data(){
        return {
            formLabelWidth: '80px',
            key:0,
            form:{
                jsbh:'',
                jsnm:'',
                jsmc:'',
                jslx:0,
                jsjb:0,
                jsxh:0,
                jszt:0
            },
            rules: {
                jsnm:[
                    {required: true, message: '请输入角色编号'}
                ],
                jsmc:[
                    {required: true, message: '请输入角色名称'}
                ],
                jslx:[
                    {required: true, message: '请输入角色类型'}
                ],
                jsjb:[
                    {required: true, message: '请输入角色级别'}
                ],
            }
        }
    },
    methods:{
        onShow(data){
            const {form} = this;
            //this.$refs.form && this.$refs.form.resetFields();
            this.key ++;
            if( data.jsbh ){
                this.title = "编辑"
                form.jsnm = data.jsnm;
                form.jsbh = data.jsbh;
                form.jsmc = data.jsmc;
                form.jslx = data.jslx;
                form.jsjb = data.jsjb;
                form.jsxh = data.jsxh;
                form.jszt = data.jszt;

            }else{
                this.title = "新建"
                form.jsnm = "";
                form.jsbh = "";
                form.jsmc = "";
                form.jslx = 0;
                form.jsjb = 0;
                form.jsxh = 0;
                form.jszt = 0;
            }
        },
        onOk(){
            const {form,unit} = this;
            const data = deepmerge({},form);
            this.$refs.form.validate((valid)=>{

                if(!valid) return;
                role.saveRole(data)
                .then(resp => {
                    const { data } = resp;
                    if( data.error_code == 0 ){
                        this.closeDialog('ok');
                    }else{
                        this.$message({
                            message: data.error_code==20701?'角色已存在':data.error_desc,
                            type: 'warning'
                        });
                    }
                }).catch(error => {
                    this.$message({message: '本地异常',type: 'warning'});
                });
            });            
        }
    }
}
</script>